<style lang="scss" scoped>
    // 去掉scoped作用域,让此样式全局共用
    $w:18px;
    $h:14px;
    .space{
        width: $w;
        height: $h;
        display: inline-block;
    }
    .expand-icon{
        width: $w;
        height: $h;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        >.el-icon{
            transition:.2s
        }
    }
</style>
<template>
    <span>
        <!-- eslint-disable -->
        <span v-for="space in scope.row._level" class="space"></span>
        <a class="expand-icon" v-if="icon(scope)" @click="expand(scope)">
            <i class="el-icon el-icon-arrow-right" :class="{'el-table__expand-icon--expanded':scope.row._expanded}" aria-hidden="true"></i>
        </a>
    </span>
</template>
<script>
    export default {
        name:'ui-table-expand',
        props:{
            scope:Object
        },
        methods:{
            icon({row}){
                if (row.children && row.children.length > 0) {
                    return true
                }
                return false
            },
            expand({row}){
                row._expanded = !row._expanded
            }
        },
        mounted(){
            console.warn('ui-table-expand 树表功能已废弃,因为element官方已实现此功能,今后将以官方为准\n','https://element.eleme.cn/#/zh-CN/component/table#shu-xing-shu-ju-yu-lan-jia-zai');
        },
    }
</script>